import React, { useEffect } from 'react'
import { useSelector, useDispatch } from "react-redux";
import { delItem, moveItem } from "../../store/module/listSlice";
function ContexteMenu() {
  //获取右键菜单
  const menuInfo = useSelector(state => state.list.menuInfo)

  const { menuTop, menuLeft } = menuInfo

  const dispatch = useDispatch()

  //删除
  const del = () => {
    console.log(1111);
    dispatch(delItem(null))
  }
  //上移
  const moveUp = (val: number) => {
    dispatch(moveItem(val))
  }
  //监听
  useEffect(() => {
    console.log(`Menu position updated: top=${menuTop}, left=${menuLeft}`);
  }, [menuTop, menuLeft]);
  return (
    <div style={{
      top: menuTop + 'px', left: menuLeft + 'px', position: 'absolute',
      border: '1px solid #ccc',
      width: '60px',
      borderRadius: '10px',
      textAlign: 'center'
    }}>
      <li style={{ lineHeight: '30px', cursor: 'pointer' }} onClick={del}>删除</li>
      <li style={{ lineHeight: '30px', cursor: 'pointer' }} onClick={() => moveUp(50)}>上移</li>
    </div>
  )
}

export default ContexteMenu
